<!doctype html>
<title>Column track merging accesibilty tests</title>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#dimensioning-the-row-column-grid--step2" />
<style>

main table {
  border: 10px solid gray;
  border-spacing: 20px;
}

main td {
  width: 50px;
  height:50px;
  padding: 0;
  background:linear-gradient(to right, yellow, orange);
}
main caption {
  background: #EEE;
}
main .desc {
  margin-top: 20px;
  color: rgb(50,0,0);
}
main pre {
  white-space: pre-wrap;

}
</style>
<main>
<p>Checks accessibility table properties when tracks are merged. a11y part of wpt/css/css-tables/column-track-merging.html</p>

<table id="td_auto">
<caption>auto</caption>
<tr>
  <td colspan=10></td>
  <td></td>
</tr>
<tr>
  <td colspan=10></td>
  <td></td>
</tr>
</table>

<table id="td_auto_width" style="width:400px">
<caption>auto 400px</caption>
<tr>
  <td colspan=10></td>
  <td></td>
</tr>
<tr>
  <td colspan=10></td>
  <td></td>
</tr>
</table>

<table id="td_fixed" style="table-layout:fixed; width: 400px">
<caption>fixed 400px</caption>
<tr>
  <td colspan=10></td>
  <td></td>
</tr>
<tr>
  <td colspan=10></td>
  <td></td>
</tr>
</table>

<table id="col_fixed_130" style="table-layout:fixed; width: 130px">
<col span=10>
<caption>col fixed 130px</caption>
<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
</table>

</main>
<script>

  test(function() {
    assert_true(!!window.accessibilityController, "accessibilityController exists");
  }, "accessibilityController exists");

  // a11y tests

  test(function() {
    let table = accessibilityController.accessibleElementById("td_auto");
    assert_equals(table.columnCount, 2, "has merged td columns");
    let cell = table.cellForColumnAndRow(0,0);
    assert_equals(cell.columnIndexRange(), "{0, 1}", "cell.columnIndexRange");
  }, "td_auto table props");

  test(function() {
    let table = accessibilityController.accessibleElementById("td_auto_width");
    assert_equals(table.columnCount, 2, "has merged td columns");
    let cell = table.cellForColumnAndRow(0,0);
    assert_equals(cell.columnIndexRange(), "{0, 1}", "cell.columnIndexRange");
  }, "td_auto_width table props");

  test(function() {
    let table = accessibilityController.accessibleElementById("td_fixed");
    assert_equals(table.columnCount, 11, "has not merged td columns");
    let cell = table.cellForColumnAndRow(0,0);
    assert_equals(cell.columnIndexRange(), "{0, 10}", "cell.columnIndexRange");
  }, "td_fixed table props");

  test(function() {
    let table = accessibilityController.accessibleElementById("col_fixed_130");
    assert_equals(table.columnCount, 10, "has not merged td columns");
    let cell = table.cellForColumnAndRow(0,0);
    assert_equals(cell.columnIndexRange(), "{0, 1}", "cell.columnIndexRange");
  }, "col_fixed table props");

 </script>

</body>
</html>
